<template>
  <div class="column">
    <div class="w990p10 clearfix">
      <side :side-data="sideData" :sideLoading="sideLoading" @selectNewList="selectNewList">

      </side>

      <router-view>
      </router-view>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Side from 'components/side/side'
  import axios from 'axios'
  import Loading from 'base/loading/loading'
  import IContent from 'base/content/content'
  import {ERR_OK} from 'api/config'
  import {mapGetters} from 'vuex'

  export default {
    data() {
      return {
        sideData: {},
        columnList: [],
        sideLoading: false,
        currentList: {},
        contentLoading: false,
        columnName: 1
      }
    },
    computed: {
      ...mapGetters([
        'currentColumn'
      ])
    },
    created() {
      if(this.currentColumn){
        setTimeout(() => {
        this._getSideData(this.currentColumn.n_id)
      }, 20)
      }
    },
    methods: {
      _getSideData(columnName) {
        this.sideLoading = false
        setTimeout(() => {

          console.log("根据 columnName {"+columnName+"} 的变化获取columnName对应侧边栏信息")

          axios.get('/api/getIndexData', {columnName: columnName * 1}).then((res) => {
            if (res.data.code === ERR_OK) {
              let data = res.data.data
              this.sideData = data.sideData
              this.columnList = data.columnList
              this.sideLoading = true
              this.columnName = columnName
            }
          })
        }, 1000)
      },
      selectNewList(item) {
        this.$router.push({path: `/${this.$route.params.columnName}/${item.c_id}`})
      }
    },
    components: {
      Side,
      Loading,
      IContent
    },
    watch: {
      $route(to, form) {
        if (this.columnName != to.params.columnName && to.params.columnName) {
          this._getSideData(to.params.columnName)
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .column
    padding-bottom: 40px
    .w990p10
      overflow: hidden
</style>
